<template>
	<sc-page-header v-if="this.pageData" :title="this.pageData.title" icon="el-icon-burger"></sc-page-header>

	<el-main>
		<el-card shadow="never">
			<div v-if="this.pageData" class="grid-content">
				<h2>{{ pageData.title }}</h2>
				<div style="border-bottom: 1px solid #ccc;margin: 15px 0px">
					{{ pageData.updateTime }}
				</div>
				<div style="background: #efefef;text-indent: 2em;line-height: 2em;">
					<p style="padding:0 10px;line-height: 2em;">
						{{pageData.description}}
					</p>
				</div>
				<div class="article-content" v-html="pageData.content"></div>
			</div>
		</el-card>
	</el-main>
</template>

<script>
	export default {
		name: 'listCrud-detail',
		data() {
			return {
				id: this.$route.query.id,
				pageData: null
			}
		},
		created() {
			this.$API.article.detail.get(this.$route.query.id).then((res)=>{
				if(res.code === 200){
					this.pageData = res.data;
				}
			})
		},
		mounted() {
			console.log(this.pageData)
		},
		methods: {

		}
	}
</script>

<style lang="scss">
.grid-content {
	border-radius: 4px;
	min-height: 36px;
	.article-content{
		background-color: rgb(255, 255, 255);
		margin: 20px 0px;
		border-radius: 4px;
		min-height:500px;
		line-height: 2em;
		b.x{
			font-size: 14px;
			margin-bottom:10px;
			display: inline-block;
		}
		b.y{
			font-size: 12px;
			color:#607cf2
		}
		b.z{
			font-size: 12px;
			color: #ccc
		}
		p{
			text-indent: 2em;
		}
		ul{
			padding: 0;
			li{
				text-indent: 2em;
				list-style: none;
			}
		}
		pre {
			display: block;
			font-family: monospace;
			background: #e2e0e0;
			margin: 8px 2em;
			color: #4f4f4f;
			padding-left: 2em;
			white-space: pre-wrap;
			word-wrap: break-word;
		}
	}
}
</style>
